import React, { Component } from 'react'
import "./mysubscribe.scss"
import { getApiUserApply } from "../../axios/api"
import { get } from '../../axios/localstorage';
import { Pagination } from 'antd';

export default class mysubscribe extends Component {

    state = {
        banner:[],

        classList:[],

        page:1,
        total:1,

        currentIndex:0,

        typeArr:[],
        type:'',
        time:'',
        price:'',
        format:'',
        timeArr:[],
        priceArr:[],
        formatArr:[],
    }

    componentWillMount(){

        this.getData();
    }

    componentDidMount(){
        window.scroll(0,0);
    }
    
    getData=(page)=>{
        setTimeout(()=>{
            let param = {
                token:get('token'),
                // type:this.state.type,
                // time:this.state.time,
                // price:this.state.price,
                // format:this.state.format,
                keyword:this.state.keywords,
                page:page?page:1,
                types:get('type')?get('type'):0,
            }

            console.log(param)

            getApiUserApply(param)
            .then( req =>{
                if(req.data.code === 1){
                    let data = req.data.data;
                    this.setState({
                        classList:data.list,
                        total:data.total
                    })
                }else{
                    this.setState({
                        classList:[],
                        total:0
                    })
                }
            }).catch( err =>{
                console.error(err);
            })

        },50)
    }

    gotoUrl=(item)=>{
        console.log(item);
    }

    onChange=(index)=>{
        this.setState({
            currentIndex:index
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.getData(page);
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/liveinfo?id='+id);
    }

    render() {
        return (
            <div className="mysubscribe">
                <div className="smain">
                    <div className="title">
                        <h1>我的预约</h1>
                        <div className="right">
                            <input type="text" placeholder="搜索直播名称" value={this.state.keywords} onChange={(ev)=>{this.setState({keywords:ev.target.value})}} />
                            <button onClick={()=>{this.getData()}}>搜索</button>
                        </div>
                    </div>
                    <div className="cen">
                            <div className="h_course">
                                <div className="none" hidden={this.state.classList.length !== 0}>
                                    <div className="cen">
                                        <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                                    </div>
                                    <p>暂无此类直播</p>
                                </div>
                                <div className="box" hidden={this.state.classList.length === 0}>
                                    {
                                        this.state.classList.map((item,index)=>{
                                            return <div className="item" key={index} onClick={()=>{this.gotoCourseInfo(item.live.id)}}>
                                                        <div className="itop" style={{backgroundImage:"url('"+item.live.thumb_text+"')"}}>
                                                            <div className="imark" >
                                                                <img className="iimg" alt="" src="assets/imgs/bofang.png" />
                                                            </div>
                                                            <div className="ido" hidden={item.is_open !== 1}>
                                                                <img alt="" src="assets/imgs/do.gif" />
                                                                <p>正在直播中</p>
                                                            </div>
                                                        </div>
                                                        <div className="ibom">
                                                            <h2>{item.live.title}</h2>
                                                            <p>{item.mtitle}</p>
                                                            <p>{item.tname}老师</p>
                                                            <div className="idiv">
                                                                <div>{item.live.start_time?item.live.start_time+"开始":"暂未设置开始时间"}</div>
                                                                <h4>{item.live.nums}人参加</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                                
                            </div>
                        </div>
                </div>

                <div className='r_page' hidden={this.state.classList.length === 0}>
                    <Pagination type="primary" showSizeChanger={false} pageSize={9}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                </div>
            </div>
        )
    }
}
